<template>
  <div class="app-container">
    <!--    切换菜单-->
    <div>
      <el-radio-group v-model="showType">
        <el-radio-button :label="0">展示专栏</el-radio-button>
        <el-radio-button :label="1">课程列表</el-radio-button>
      </el-radio-group>
    </div>
    <!--    展示专栏-->
    <div class="showColumn" v-show="showType === 0" v-loading="columnLoading">
      <!--      新增按钮-->
      <div class="addBtn" v-if="curRole=='schoolAdmin'">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增专栏</el-button>
      </div>
      <div class="columnList" v-if="columnList&&columnList.length>0">
        <div v-for="(item,index) in columnList" :key="index"
             :class="item.isShow?'columnItemOpen columnItem':'columnItem'"
        >
          <!--          顶部操作按钮-->
          <div class="itemTop">
            <div class="topLeft">
              <div class="title">{{ item.columnName }}</div>
              <div class="btns">
                <img
                  :src="item.editCurrentIcon"
                  class="btnItem"
                  @mouseover="item.editCurrentIcon=iconBtns.editActive"
                  @mouseleave="item.editCurrentIcon=iconBtns.editIcon"
                  @click="handleUpdate(item)"
                />
                <img
                  :src="item.topCurrentIcon"
                  class="btnItem"
                  v-if="index!=0&&curRole=='schoolAdmin'"
                  @mouseover="item.topCurrentIcon=iconBtns.topActive"
                  @mouseleave="item.topCurrentIcon=iconBtns.topIcon"
                  @click="moveUp(item)"
                />
                <img
                  :src="item.bottomCurrentIcon"
                  class="btnItem"
                  v-if="index!=columnList.length-1&&curRole=='schoolAdmin'"
                  @mouseover="item.bottomCurrentIcon=iconBtns.bottomActive"
                  @mouseleave="item.bottomCurrentIcon=iconBtns.bottomIcon"
                  @click="moveDown(item)"
                />
                <img
                  :src="item.renameCurrentIcon"
                  class="btnItem"
                  v-if="curRole=='schoolAdmin'"
                  @mouseover="item.renameCurrentIcon=iconBtns.renameActive"
                  @mouseleave="item.renameCurrentIcon=iconBtns.renameIcon"
                  @click="editName(item)"
                />
                <img
                  :src="item.delCurrentIcon"
                  class="btnItem"
                  v-if="curRole=='schoolAdmin'"
                  @mouseover="item.delCurrentIcon=iconBtns.delActive"
                  @mouseleave="item.delCurrentIcon=iconBtns.delIcon"
                  @click="delById(item)"
                />
              </div>
            </div>
            <div class="topRight" @click="handleOpen(item.id)" v-if="isShowOpen(index)">
              {{ item.isShow ? '收起' : '展开' }}
              <i class="el-icon-arrow-down" style="font-size:18px;margin-left: 8px" v-if="!item.isShow"></i>
              <i class="el-icon-arrow-up" style="font-size:18px;margin-left: 8px" v-if="item.isShow"></i>
            </div>
          </div>
          <div class="itemContent" :ref="`itemContent_${index}`">
            <div v-for="(e,i) in item.courseList" :key="i" class="courseItem">
              <courseItem :item="e" isRouteTo :isShowRecommendTag="e.type==0||e.type==1"></courseItem>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="emptyBox">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <!--  课程列表  -->
    <div class="course_list" v-loading="loading" v-show="showType === 1">
      <div class="search_collect">
        <el-form
          :model="model"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="68px"

        >
          <el-form-item label="课程名称">
            <el-input
              style="width: 256px"
              v-model="model.courseName"
              placeholder="请输入课程名称"
              @keyup.enter.native="handleSearch"
              clearable
            />
          </el-form-item>
          <el-form-item label="分院名称">
            <el-select
              style="width: 256px"
              filterable
              v-model="model.branchId"
              placeholder="请选择分院名称"
              clearable
            >
              <el-option
                v-for="item in branchList"
                :key="item.branchId"
                :label="item.branchName"
                :value="item.branchId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主讲教师">
            <el-select
              style="width: 256px"
              filterable
              v-model="model.principalId"
              placeholder="请选择主讲教师"
              clearable
            >
              <el-option
                v-for="item in teacherList"
                :key="item.teacherId"
                :label="item.name"
                :value="item.teacherId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="课程类型">
            <el-select
              style="width: 256px"
              filterable
              v-model="model.courseType"
              placeholder="请选择课程类型"
              clearable
            >
              <el-option
                v-for="(item, index) of dict.type.course_type"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学期">
            <el-select
              style="width: 256px"
              filterable
              v-model="model.semesterId"
              placeholder="请选择学期"
              clearable
            >
              <el-option label="全部" :value="''"></el-option>
              <el-option
                v-for="item in schoolSemesterList"
                :key="item.semesterId"
                :label="item.semesterName"
                :value="item.semesterId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="模板类型">
            <el-select
              style="width: 256px"
              filterable
              v-model="model.courseTemplate"
              placeholder="请选择课程模版"
              clearable
            >
              <el-option label="全部" :value="''"></el-option>
              <el-option label="通用模版" :value="0"></el-option>
              <el-option label="工学一体模版" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-select
              style="width: 256px"
              filterable
              v-model="model.sortSearch"
              placeholder="请选择排序"
            >
              <el-option
                v-for="item in sortList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              type="primary"
              size="mini"
              @click="handleSearch"
            >搜索
            </el-button
            >
            <el-button
              v-preventReClick
              type="text"
              size="mini"
              @click="resetSearch"
              style="color:#666"
            >重置
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="course_collect">
        <div
          @click="routeTo(item)"
          class="course_card"
          v-for="(item, index) in courseList"
          :key="index"
        >
          <img class="img" :src="item.coursePic" alt=""/>
          <div class="course_name">
            <span v-if="item.courseType == 3">(工学一体)</span>
            <tooltip
              position="top"
              :text="item.courseName"
              :width="item.courseType == 3 ? 'calc(100% - 80px)' : '100%'"
            />
          </div>
          <div class="branch_name">
            <tooltip position="top" :text="item.branchName" width="100%"/>
          </div>
          <div class="card_bottom">
            <div class="teacher_name">{{ item.principalName }}</div>
            <el-popover placement="bottom" trigger="hover">
              <div class="hover_content">
                <div class="hover_left">
                  <div class="left_label">基础数据</div>
                  <div class="item">
                    <div class="label">题目数：</div>
                    <div class="value">
                      {{ item.topicNum ? item.topicNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">考核数：</div>
                    <div class="value">
                      {{ item.examPaperNum ? item.examPaperNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">练习数：</div>
                    <div class="value">
                      {{ item.practicePaperNum ? item.practicePaperNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                </div>
                <div class="hover_left ml20">
                  <div class="left_label">学习数据</div>
                  <div class="item">
                    <div class="label">点击量：</div>
                    <div class="value">
                      {{ item.clickNum ? item.clickNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">在学人数：</div>
                    <div class="value">
                      {{ item.stuStudyNum ? item.stuStudyNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">结课人数：</div>
                    <div class="value">
                      {{ item.finishNum ? item.finishNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                </div>
                <div class="hover_left ml20">
                  <div class="left_label">考核数据</div>
                  <div class="item">
                    <div class="label">累计考核人次：</div>
                    <div class="value">
                      {{ item.examNum ? item.examNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">生均考核次数：</div>
                    <div class="value">
                      {{ item.avgExamNum ? item.avgExamNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">首考通过率：</div>
                    <div class="value">
                      {{
                        item.firstExamPassingRate
                          ? item.firstExamPassingRate
                          : 0
                      }}%
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">重考人次：</div>
                    <div class="value">
                      {{ item.applyNum ? item.applyNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">生均重考次数：</div>
                    <div class="value">
                      {{ item.avgApplyNum ? item.avgApplyNum.toLocaleString('en-US') : 0 }}
                    </div>
                  </div>
                </div>
              </div>
              <div slot="reference" class="learn_num">
                <img
                  class="icon_task"
                  src="@/assets/images/icon_task.png"
                  alt=""
                />
                <div class="value">{{ item.examNum }}</div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <div v-if="courseList.length == 0" class="empty_box">
        <el-empty description="暂无课程"></el-empty>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="model.pageNum"
        :pageSizes="[12, 24, 48, 96]"
        :limit.sync="model.pageSize"
        @pagination="getCourseRecommendCourseList"
      />
    </div>
    <detialDialog :open.sync="showDialog"></detialDialog>
    <!--    重命名弹窗-->
    <RenameDialog ref="renameDialog" @refresh="getColumnList"></RenameDialog>
    <!--    新增编辑专栏弹窗-->
    <ColumnDialog ref="columnDialog" @refresh="getColumnList"></ColumnDialog>
  </div>
</template>

<script>
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'
import { getCourseRecommendCourseList } from '@/api/home'
import { listPost_teacher } from '@/api/schoolOrganization/teacher'
import { listPost_branch } from '@/api/schoolOrganization/organization'
import detialDialog from './recommendCourse/detialDialog'
import RenameDialog from '@/components/ShowColumn/RenameDialog.vue'
import ColumnDialog from '@/components/ShowColumn/ColumnDialog.vue'
import { mapGetters } from 'vuex'
import courseItem from '@/components/ShowColumn/courseItem.vue'
import { columnDel, columnSort, getColumnList } from '@/api/showColumn'

export default {
  components: {
    courseItem,
    detialDialog,
    RenameDialog,
    ColumnDialog
  },
  name: 'Index',
  dicts: ['course_type'],
  data() {
    return {
      //主讲教师列表
      teacherList: [],
      //分院列表
      branchList: [],
      //课程列表
      courseList: [],
      //推荐课程列表
      schoolSemesterList: [],
      recommendCourseList: [],
      showDialog: false,
      loading: false,
      recommendLoading: false,
      total: 0,
      model: {
        sortSearch: 9,
        courseType: '',
        principalId: '',
        branchId: '',
        courseName: '',
        pageNum: 1,
        pageSize: 12,
        hide: 0,
        semesterId: '',
        courseTemplate: ''
      },
      sortList: [
        {
          value: 9,
          label: '综合排序'
        },
        {
          value: 0,
          label: '最新发布时间'
        },
        {
          value: 1,
          label: '累计考核次数(由高到低)'
        },
        {
          value: 2,
          label: '累计考核次数(由低到高)'
        },
        {
          value: 3,
          label: '累计结课人数(由高到低)'
        },
        {
          value: 4,
          label: '累计结课人数(由低到高)'
        },
        {
          value: 5,
          label: '当前在学人数(由高到低)'
        },
        {
          value: 6,
          label: '当前在学人数(由低到高)'
        },
        {
          value: 7,
          label: '课程总点击量(由高到低)'
        },
        {
          value: 8,
          label: '课程总点击量(由低到高)'
        }
      ],
      // 展示类型 0:推荐课程 1:课程列表
      showType: 0,
      // 按钮状态
      iconBtns: {
        editIcon: require('@/assets/images/showColumn/editIcon.png'),
        editActive: require('@/assets/images/showColumn/editActive.png'),
        topIcon: require('@/assets/images/showColumn/upIcon.png'),
        topActive: require('@/assets/images/showColumn/upActive.png'),
        bottomIcon: require('@/assets/images/showColumn/downIcon.png'),
        bottomActive: require('@/assets/images/showColumn/downActive.png'),
        renameIcon: require('@/assets/images/showColumn/renameIcon.png'),
        renameActive: require('@/assets/images/showColumn/renameActive.png'),
        delIcon: require('@/assets/images/showColumn/delIcon.png'),
        delActive: require('@/assets/images/showColumn/delActive.png')
      },
      columnList: [],
      columnLoading: false,
      isOpenList: []

    }
  },
  computed: {
    ...mapGetters(['curRole'])
  },
  watch: {
    'model.branchId': {
      handler() {
        this.getTeacher()
      },

      deep: true
    },
    'showType': {
      async handler(val) {
        if (val === 1) {
          await this.getSchoolSemester()
          this.getTeacher()
          this.getBranch()
          this.getCourseRecommendCourseList()
        } else {
          this.getColumnList()
        }
      },
      immediate: true, // 立即生效
      deep: true
    }
  },
  activated() {
    // this.getTeacher()
    // this.getBranch()
    // this.getCourseRecommend()
    // this.getCourseRecommendCourseList()
  },
  async created() {
    // await this.getColumnList()
    // await this.getSchoolSemester()
    // this.getTeacher()
    // this.getBranch()
    // this.getCourseRecommend()
    // this.getCourseRecommendCourseList()
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.columnList = JSON.parse(JSON.stringify(this.columnList))
    },
    isShowOpen(index) {
      let status = true
      if (this.$refs[`itemContent_${index}`] && this.$refs[`itemContent_${index}`][0]) {
        let height = this.$refs[`itemContent_${index}`][0].clientHeight
        status = height > 275
      }
      return status
    },
    findNearestSemesterId(semesterArray) {
      const now = new Date()
      let matchedSemesterId = null
      let nearestSemesterId = null
      let minDiff = Infinity

      semesterArray.forEach((semester) => {
        const beginTime = new Date(semester.beginTime)
        const endTime = new Date(semester.endTime)

        // 判断当前时间是否在区间内
        if (now >= beginTime && now < endTime) {
          matchedSemesterId = semester.semesterId // 找到匹配的学期ID
          return // 直接跳出循环
        }

        // 如果不在区间内，计算与当前时间的差值，寻找最近的一个开始时间
        const diff = Math.abs(now - beginTime)
        if (diff < minDiff) {
          minDiff = diff
          nearestSemesterId = semester.semesterId
        }
      })

      // 如果找到了匹配的学期，优先返回匹配的学期ID
      return matchedSemesterId || nearestSemesterId || ' '
    },
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
      this.model.semesterId = this.findNearestSemesterId(rows)
    },
    routeTo(item) {
      this.$router.push({
        path: '/course/addCourse',
        query: {
          from: 'recommend',
          courseId: item.courseId,
          branchId: item.branchId,
          type: 'detail'
        }
      })
    },
    // 获取教师列表
    getTeacher() {
      listPost_teacher({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId,
        branchId: this.model.branchId
      }).then((response) => {
        this.teacherList = response.rows
      })
    },
    getBranch() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then((response) => {
        this.branchList = response.rows
      })
    },
    // 获取专栏列表
    async getColumnList() {
      try {
        this.columnLoading = true
        let res = await getColumnList()
        if (res.code == 200) {
          this.columnList = res.rows
          if (this.columnList.length > 0) {
            this.columnList.forEach(item => {
              if (this.isOpenList.length > 0) {
                this.isOpenList.forEach(item1 => {
                  if (item.id == item1.id) {
                    this.$set(item, 'isShow', item1.isShow)
                  }
                })
              } else {
                this.$set(item, 'isShow', true)
              }
              // icon按钮
              this.$set(item, 'editCurrentIcon', this.iconBtns.editIcon)
              this.$set(item, 'topCurrentIcon', this.iconBtns.topIcon)
              this.$set(item, 'bottomCurrentIcon', this.iconBtns.bottomIcon)
              this.$set(item, 'renameCurrentIcon', this.iconBtns.renameIcon)
              this.$set(item, 'delCurrentIcon', this.iconBtns.delIcon)
            })
          }
          this.$nextTick(() => {
            this.handleResize()
          })
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.columnLoading = false
      }
    },
    async getCourseRecommendCourseList() {
      this.loading = true
      try {
        let res = await getCourseRecommendCourseList(this.model)
        const { code, rows, total } = res
        if (code === 200) {
          this.loading = false
          this.total = total
          this.courseList = rows
        }
      } catch (e) {
        console.error(e)
      } finally {
      }
    },
    handleSearch() {
      // 备注：产品要求搜索条件变动，页面回到第一页，
      this.model.pageNum = 1
      this.getCourseRecommendCourseList()
    },
    resetSearch() {
      this.model = {
        sortSearch: 9,
        semesterId: this.model.semesterId,
        courseType: '',
        principalId: '',
        branchId: '',
        courseName: '',
        pageNum: 1,
        pageSize: 12,
        courseTemplate: ''
      }
      this.getCourseRecommendCourseList()
    },
    handleAdd() {
      this.$refs.columnDialog.show()
    },
    handleOpen(id) {
      this.columnList.map(item => {
        if (item.id === id) {
          item.isShow = !item.isShow
        }
      })
      this.isOpenList = this.columnList.map(item => {
        return {
          id: item.id,
          isShow: item.isShow
        }
      })
    },
    handleUpdate(item) {
      this.$refs.columnDialog.show(item.id, item.columnName)
    },
    // 上移
    moveUp(item) {
      this.columnLoading = true
      let arr = JSON.parse(JSON.stringify(this.columnList))
      let index = arr.findIndex(e => item.id === e.id)
      if (index > 0) {
        arr[index] = arr.splice(index - 1, 1, arr[index])[0]
        let columnIds = arr.map(e => e.id)
        this.handleSort(columnIds)
      }

    },
    // 下移
    moveDown(item) {
      this.columnLoading = true
      let arr = JSON.parse(JSON.stringify(this.columnList))
      let index = arr.findIndex(e => item.id === e.id)
      if (index < arr.length - 1) {
        arr[index] = arr.splice(index + 1, 1, arr[index])[0]
        let columnIds = arr.map(e => e.id)
        this.handleSort(columnIds)
      }
    },
    async handleSort(ids) {
      try {
        let res = await columnSort(ids.join(','))
        if (res.code == 200) {
          this.getColumnList()
          this.columnLoading = false
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 修改名字
    editName(item) {
      this.$refs.renameDialog.show(item)
    },
    // 删除
    delById(item) {
      this.$confirm(`确定删除【${item.columnName}】吗？`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      }).then(() => {
        columnDel(item.id).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getColumnList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: calc(100vh - 90px);
  overflow: auto;

  .showColumn {
    .addBtn {
      margin-top: 10px;
    }

    .columnList {
      .columnItem {
        width: 100%;
        height: 275px;
        overflow: hidden;
        margin-top: 33px;
        padding: 0 38px 0 0;
        box-sizing: border-box;

        .itemTop {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .topLeft {
            display: flex;
            align-items: center;

            .title {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 500;
              font-size: 18px;
              color: #333333;
              line-height: 25px;
              margin-right: 24px;
              cursor: pointer;
            }

            .btns {
              display: flex;
              align-items: center;

              .btnItem {
                width: 16px;
                height: 16px;
                margin-right: 10px;
              }
            }
          }

          .topRight {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 16px;
            color: #28B28B;
            line-height: 22px;
            display: flex;
            align-items: center;
            cursor: pointer;
          }
        }

        .itemContent {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
          grid-gap: 20px;
          justify-content: center;

          .courseItem {
            flex: 0 0 auto;
            //margin: 0 20px 24px 0;
          }

          .courseItem:last-child {
            margin-right: 0;
          }
        }
      }

      .columnItemOpen {
        min-height: 275px;
        height: auto;
      }
    }

    .emptyBox {
      margin-top: 70px;
    }
  }

  .recommend_course {
    background: rgba(84, 131, 195, 0.1);
    padding: 21px 20px 10px;
    border-radius: 16px;

    &_title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;

      .text {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: bold;
        font-size: 18px;
        color: #333333;
        position: relative;

        .manage_btn {
          height: 24px;
          line-height: 10px;
          right: -70px;
          position: absolute;
        }
      }

      .more {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #4a90e2;
        cursor: pointer;
        user-select: none;
      }
    }

    .scroll_bar {
      padding: 0 20px 37px;
      box-sizing: border-box;
      width: 100%;
      overflow-x: auto;
      white-space: nowrap;
      display: flex;

      .course_card {
        flex: 0 0 auto;
        /* 不拉伸，固定宽度 */
        width: 250px;
        height: 258px;
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid #ebebeb;
        cursor: pointer;
        margin-right: 32px;
        position: relative;

        .tag {
          position: absolute;
          top: 0;
          left: 0;
          width: 79px;
          height: 23px;
          border-radius: 9px 0 9px 0;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          font-size: 16px;
          color: #ffffff;
          text-align: center;
        }

        .img {
          width: 100%;
          height: 156px;
          background: #24044e;
          border-radius: 9px 9px 0 0;
        }

        .course_name {
          margin-top: 4px;
          padding: 0 0 0 12px;
          box-sizing: border-box;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          font-size: 17px;
          color: #333333;

          span {
            font-weight: 500;
            font-size: 12px;
            color: #f89a33;
            margin-right: 6px;
          }
        }

        .branch_name {
          margin-top: 4px;
          padding: 0 12px 0 12px;
          box-sizing: border-box;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
        }

        .card_bottom {
          line-height: 22px;
          margin-top: 4px;
          padding: 0 12px 0 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .teacher_name {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 13px;
            color: #999999;
          }

          .learn_num {
            display: flex;
            align-items: center;

            .icon_task {
              width: 16px;
            }

            .value {
              margin-left: 4px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 13px;
              color: #999999;
            }
          }
        }
      }

      .course_card:last-child {
        margin-right: 0;
      }
    }

    /* 滚动条样式 */
    .scroll_bar::-webkit-scrollbar {
      height: 6px;
      /* 滚动条宽度 */
    }

    .scroll_bar::-webkit-scrollbar-track {
      background: transparent;
    }

    .scroll_bar::-webkit-scrollbar-thumb {
      background: #ccdcf3;
      /* 滚动条thumb颜色 */
      border-radius: 5px;
      /* 滚动条thumb圆角 */
    }
  }

  .course_list {
    margin-top: 20px;
    width: 100%;

    .search_collect {
      display: flex;
      align-items: center;
      margin-top: 20px;
      padding: 24px 24px 8px;
      box-sizing: border-box;
      background: #f3f4f5;
      border-radius: 8px;
      margin-bottom: 20px;

      ::v-deep .el-form-item {
        margin-bottom: 16px;
        margin-right: 40px;
      }

      ::v-deep .el-form-item__label {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
    }

    .course_collect {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
      grid-gap: 20px;
      justify-content: center;

      .course_card {
        flex: 0 0 auto;
        /* 不拉伸，固定宽度 */
        width: 228px;
        height: 242px;
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid #ebebeb;
        cursor: pointer;
        margin: 0 20px 24px 0;
        position: relative;

        .tag {
          position: absolute;
          top: 0;
          left: 0;
          width: 72px;
          height: 21px;
          border-radius: 9px 0 9px 0;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
        }

        .img {
          width: 100%;
          height: 156px;
          background: #24044e;
          border-radius: 9px 9px 0 0;
        }

        .course_name {
          margin-top: 2px;
          padding: 0 0 0 12px;
          box-sizing: border-box;
          line-height: 22px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          font-size: 17px;
          color: #333333;

          span {
            font-weight: 500;
            font-size: 12px;
            color: #f89a33;
            margin-right: 6px;
          }
        }

        .branch_name {
          padding: 0 12px 0 12px;
          box-sizing: border-box;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
        }

        .card_bottom {
          line-height: 22px;
          padding: 0 12px 0 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .teacher_name {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 13px;
            color: #999999;
          }

          .learn_num {
            display: flex;
            align-items: center;

            .icon_task {
              width: 16px;
            }

            .value {
              margin-left: 4px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 13px;
              color: #999999;
            }
          }
        }
      }
    }
  }
}

.bg_orange {
  background: #f89a33;
}

.bg_green {
  background: #11a983;
}

::v-deep .el-popover .el-popper {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 74, 88, 0.1);
  border-radius: 8px !important;
  padding: 12px 16px;
  box-sizing: border-box;
}

.hover_content {
  display: flex;
  padding: 16px;
  box-sizing: border-box;

  .hover_left {
    .left_label {
      font-size: 18px;
      color: #1ab394;
      font-weight: bold;
    }

    .item {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      box-sizing: border-box;

      .label {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
      }

      .value {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }
    }

    .item:first-child {
      margin-top: 0;
    }
  }
}

.empty_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
